{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" href="../../static/technological/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .add_background {
            background: #A9A9A9;
        }
        #page_home {
            width: 60px;height: 30px;line-height: 30px;border-radius: 3px;background: #00a0e9;color: white;text-align: center;margin-top: 5px;cursor: pointer;display: inline-block;vertical-align: top;
        }
        #page_home:hover {
            background: #2db7f5;
        }
        .page_number {
            width: 40px;height: 30px;line-height: 30px;border-radius: 3px;background: #cfcfcf;text-align: center;margin-top: 5px;cursor: pointer;margin-left: 7px;display: inline-block;vertical-align: top;
        }
        .page_number:hover {
            background: #999999;
        }
        #page_end {
            width: 60px;height: 30px;line-height: 30px;border-radius: 3px;background: #00a0e9;color: white;text-align: center;margin-top: 5px;cursor: pointer;margin-left: 7px;display: inline-block;vertical-align: top;
        }
        #page_end:hover {
            background: #2db7f5;
        }
        .page_active {
            background: #2db7f5;color: white;
        }
        #file_list {
            width: 100%;height: 85%;border-bottom: #cfcfcf solid 1px;overflow: auto;
        }
        #file_list::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div style="width: 100%;height: 100%;">
        <div style="width: 20%;height: 95%;margin-left: 1%;border: #cfcfcf solid 1px;display: inline-block;vertical-align: top;margin-top: 1.25%;background: white;">
            {% for foo in DocumentsDict %}
                <div onclick="choose_document_type('{{ foo.type }}')" style="width: 100%;height: 40px;border-bottom: #cfcfcf dashed 1px;line-height: 40px;padding-left: 2%;cursor: pointer;">
                    <p class="DocumentType" id="{{ foo.type }}" style="display: inline-block;vertical-align: top;width: 80%;">{{ foo.name }}</p>
                </div>
            {% endfor %}

        </div>

        <div style="width: 77%;margin-left: 0.5%;height: 95%;border: #cfcfcf solid 1px;display: inline-block;margin-top: 1.25%;vertical-align: top;background: white;">
            <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;padding-left: 10px;padding-right: 15px;">
{#                <button style="width: 120px;height: 30px;margin-top: 5px;border-radius: 3px;background: #2db7f5;border: #2db7f5 solid 1px;color: white;letter-spacing: 2px;">上传文件</button>#}
                <div style="width: 60%;height: 40px;vertical-align: top;float: right;text-align: right;">
                    <input id="search_val" type="text" style="width: 300px;height: 30px;margin-top: 5px;border-bottom-left-radius: 3px;border-top-left-radius: 3px;outline: none;border: #2db7f5 solid 1px;" autocomplete="off">
                    <button onclick="QueryFile('', 1, 1)" style="width: 90px;letter-spacing: 2px;border-bottom-right-radius: 3px;border-top-right-radius: 3px;border: #2db7f5 solid 1px;background: #2db7f5;color: white;margin-left: -5px;margin-top: 5px;height: 30px;vertical-align: top;">搜索</button>
                </div>
            </div>
            <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;background: #F5F5F5;">
                <div style="width: 5%;display: inline-block;vertical-align: top;height: 40px;line-height: 40px;border-right: #cfcfcf solid 1px;text-align: center;">序号</div>
                <div style="width: 65%;display: inline-block;vertical-align: top;height: 40px;line-height: 40px;border-right: #cfcfcf solid 1px;text-align: center;">文件名</div>
                <div style="width: 18.5%;display: inline-block;vertical-align: top;height: 40px;line-height: 40px;border-right: #cfcfcf solid 1px;text-align: center;">上传人</div>
                <div style="width: 10%;display: inline-block;vertical-align: top;height: 40px;line-height: 40px;text-align: center;">操作</div>
            </div>

            <div id="file_list">
                <div id="zanwuziyuan1" style="width: 100%;text-align: center;">
                    <img src="../../static/personal_center/img/暂无资源.png" alt=""
                         style="width: 120px;height: 120px;margin-top: 20%;">
                    <p style="color: #cfcfcf;">请选择文件类型</p>
                </div>
            </div>

            <div style="width: 100%;height: 40px;padding-left: 15px;">
                <div id="page_home" onclick="page_click(this)" data-value="1">首页</div>
                <div id="PageDiv" style="display: inline-block;vertical-align: top;">
                    <div onclick="page_click(this)" class="page_number page_active" data-value="1">1</div>
                    <div onclick="page_click(this)" class="page_number" data-value="2">2</div>
                    <div onclick="page_click(this)" class="page_number" data-value="3">3</div>
                    <div onclick="page_click(this)" class="page_number" data-value="4">4</div>
                    <div onclick="page_click(this)" class="page_number" data-value="5">5</div>
                    <div onclick="page_click(this)" class="page_number" data-value="6">6</div>
                    <div onclick="page_click(this)" class="page_number" data-value="7">7</div>
                </div>
                <div id="page_end" onclick="page_click(this)" data-value="7">尾页</div>

                <div style="height: 40px;padding-left: 20px;display: inline-block;vertical-align: top;">
                    <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;">共 <span id="total_page">0</span> 页</div>
                    <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;margin-left: 20px;">跳至 <input id="SkipPage" style="width: 40px;height: 23px;border: #cfcfcf solid 1px;outline: none;text-align: center;" type="text" autocomplete="off"> 页</div>
                    <div style="height: 40px;line-height: 40px;display: inline-block;vertical-align: top;margin-left: 20px;">共计：<span id="total_number">0</span> 条数据</div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            document.getElementById("supervision_inspection_management").className = "add_class";
            document.getElementById("personage").className = "add-nav-active";
        };

        function choose_document_type(document_type) {
            var type_obj = document.getElementsByClassName("DocumentType");
            for (var i=0; i<type_obj.length; i++) {
                type_obj[i].style.color = "";
            }
            document.getElementById(document_type).style.color = "blue";
            QueryFile(document_type);
        }

        function QueryFile(document_type, page_unmber=1, search_flag=false) {
            var form = new FormData();
            if (search_flag) {
                var search_val = document.getElementById("search_val").value;
                if (!search_val) {
                    alert("请输入搜索关键词！")
                    return false
                }
                form.append("search_val", search_val);
                var type_list = document.getElementsByClassName("DocumentType");
                for (var j=0; j<type_list.length; j++) {
                    if (type_list[j].style.color === "blue") {
                        document_type = type_list[j].id
                        break
                    }
                }
                if (!document_type) {
                    alert("请选择文件类型！")
                    return false
                }
            }
            document.getElementById("loading").style.display = "inline-block";
            form.append("document_type", document_type)
            form.append("page_unmber", page_unmber)
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/supervision-inspection/summary_official_documents.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate)
                        document.getElementById("total_page").innerText = JsonDate["total_page"];
                        document.getElementById("total_number").innerText = JsonDate["total_number"];
                        create_file_table(JsonDate["file_list"]);
                        create_page_list(JsonDate["total_page"], page_unmber)
                    }
                }
             };
        }

        function create_file_table(json_data) {
            if (json_data.length) {
                document.getElementById("file_list").innerHTML = "";
                for (var i=0; i<json_data.length; i++) {
                    var html_str = `
                        <div style="width: 100%;height: 40px;border-bottom: #cfcfcf solid 1px;">
                            <div style="width: 5%;display: inline-block;vertical-align: top;height: 40px;line-height: 40px;border-right: #cfcfcf solid 1px;text-align: center;">`+json_data[i]["serial"]+`</div>
                            <div title="`+json_data[i]["file_name"]+`" style="width: 65%;display: inline-block;vertical-align: top;height: 40px;line-height: 40px;border-right: #cfcfcf solid 1px;padding-right: 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;cursor: pointer;">`+json_data[i]["file_name"]+`</div>
                            <div style="width: 18.5%;display: inline-block;vertical-align: top;height: 40px;line-height: 40px;border-right: #cfcfcf solid 1px;text-align: center;">`+json_data[i]["upload_people"]+`</div>
                            <div style="width: 10%;display: inline-block;vertical-align: top;height: 40px;line-height: 40px;text-align: center;">
                                <a href="`+json_data[i]["file_path"]+`">查看</a> | <a href="`+json_data[i]["dowload_file"]+`" style="color: red;">下载</a>
                            </div>
                        </div>
                    `
                    $("#file_list").append(html_str)
                }
            }
        }

        function page_click(this_obj) {
            var type_list = document.getElementsByClassName("DocumentType");
            var document_type = "";
            for (var j=0; j<type_list.length; j++) {
                if (type_list[j].style.color === "blue") {
                    document_type = type_list[j].id
                    break
                }
            }
            if (!document_type) {
                alert("请选择文件类型！")
                return false
            }
            var click_object = this_obj.getAttribute("data-value");
            QueryFile(document_type, click_object);
            create_page_list(document.getElementById("total_page").innerText, click_object)
        }

        function create_page_list(total_page, page_unmber) {
            document.getElementById("page_end").setAttribute("data-value", total_page);
            if (parseInt(total_page) > 7 && parseInt(page_unmber) >= 5) {
                document.getElementById("PageDiv").innerHTML = "";
                if (parseInt(page_unmber)+4 > total_page) {
                    var item_val = parseInt(total_page) + 1
                }else {
                    item_val = parseInt(page_unmber)+4
                }
                for (var i=parseInt(page_unmber)-3; i<item_val; i++) {
                    var htmlStr = `
                            <div onclick="page_click(this)" class="page_number" data-value="`+i+`">`+i+`</div>
                        `
                    $("#PageDiv").append(htmlStr);
                }
            }else if (parseInt(total_page) > 7 && parseInt(page_unmber) < 5) {
                document.getElementById("PageDiv").innerHTML = "";
                for (var a=1; a<8; a++) {
                    htmlStr = `
                            <div onclick="page_click(this)" class="page_number" data-value="`+a+`">`+a+`</div>
                        `
                    $("#PageDiv").append(htmlStr);
                }
            }else{
                document.getElementById("PageDiv").innerHTML = "";
                for (var k=1; k<parseInt(total_page)+1; k++) {
                    if (k === parseInt(page_unmber)) {
                        htmlStr = `
                            <div onclick="page_click(this)" class="page_number page_active" data-value="`+k+`">`+k+`</div>
                        `
                    }else {
                        htmlStr = `
                            <div onclick="page_click(this)" class="page_number" data-value="`+k+`">`+k+`</div>
                        `
                    }
                    $("#PageDiv").append(htmlStr);
                }
            }

            var page_list = document.getElementsByClassName("page_number");
            for (var page=0; page<page_list.length; page++) {
                page_list[page].className = "page_number";
            }
            for (var j=0; j<page_list.length; j++) {
                if (parseInt(page_list[j].getAttribute("data-value")) === parseInt(page_unmber)) {
                    page_list[j].className = "page_number page_active";
                    break
                }
            }
        }

        $('#SkipPage').bind('keydown', function (event) {
            var event = window.event || arguments.callee.caller.arguments[0];
            if (event.keyCode === 13) {
                var page_number = document.getElementById("SkipPage").value
                var type_list = document.getElementsByClassName("DocumentType");
                var document_type = "";
                for (var j=0; j<type_list.length; j++) {
                    if (type_list[j].style.color === "blue") {
                        document_type = type_list[j].id
                        break
                    }
                }
                QueryFile(document_type, page_number);
            }
        });

    </script>
{% endblock %}



